<template>
  <div v-loading="loading" class="dashboard-container">
    <div class="app-container">
      <!-- 定义基本布局 -->
      <!-- 卡片组件 -->
      <el-card class="tree-card">
        <!-- 行列布局  行组件-->
        <!--element-ui官网中讲到 将 type 属性赋值为 'flex'，可以启用 flex 布局，并可通过 justify 属性来指定
         start,center, end,space-between, space-around 其中的值来定义子元素的排版方式。 -->
        <TreeTools :tree-node="company" :is-root="true" @addDepts="addDepts" />
        <!-- 放置树形组件
          props 表示配置选项
          default-expand-all 表示是否默认展开所有节点
          node-key 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
          data 用来展示数据 -->
        <!-- 这个是eleui树形组建的规定，从下面data（）return里面拿的那个数组值  departs -->
        <el-tree :data="departs" :props="defaultProps" default-expand-all>
          <!-- 这两种方式一样 -->
          <!-- 有多少数据就有多少的插槽循环 -->
          <TreeTools slot-scope="{data}" :tree-node="data" @delDepts="getDepartments" @addDepts="addDepts" @editDepts="editDepts" />
          <!-- <template v-slot="{data}">  一样-->
          <!-- <template slot-scope="{data}">
            template标签不会生成实质标签
            <TreeTools :tree-node="data" />
          </template> -->
          <!-- vue标签的运行方式 先去执行作用域插槽的赋值 然后执行props传值 -->

        </el-tree>
      </el-card>
    </div>
    <!-- 新增的弹层 这里tree-node和上面的不是同一个  因为在不同组件   -->
    <!-- @changeDialog="change" -->
    <add-dept ref="addDept" :show-dialog.sync="showDialog" :tree-node="node" @addDepts="getDepartments" />

  </div>
</template>

<script>
// body 参数的data
import TreeTools from './components/tree-tools.vue'
import { getDepartments } from '@/api/departments.js'
import { tranListToTreeData } from '@/utils/index.js'
import AddDept from './components/add-dept.vue'
export default {
  components: {
    TreeTools,
    AddDept
  },
  data() {
    return {
      departs: [],
      defaultProps: {
        // 如果这里是空的  就使用默认的 label:'label'   children:"children"
        label: 'name'
      },
      company: {},
      showDialog: false, // 定义是否显示窗体
      node: null, // 用来记录点击的是哪个部门
      loading: false // 定义一个进度条的变量
    }
  },
  created() {
    this.getDepartments() // 调用自身方法
  },
  methods: {
    async getDepartments() {
      // 获取数据的时候是耗时的 将 loading打开
      this.loading = true // 打开遮罩层
      const result = await getDepartments()
      this.company = { name: result.companyName, manager: '负责人', id: '' }
      // this.departs = result.depts // 将其转换成树形结构
      this.departs = tranListToTreeData(result.depts, '')
      console.log(result)
      // await 会一直等到后面的 Promise 进行 resolve   进度条上加个延迟
      await new Promise(resolve => setTimeout(() => resolve(), 500))
      // 将这些都处理完之后 关闭遮罩层
      this.loading = false
    },
    addDepts(node) {
      this.showDialog = true // 显示弹层
      // 因为node是当前的点击的部门， 此时这个部门应该记录下来,
      this.node = node
    },
    // change(value) {
    //   this.showDialog = value
    // }
    editDepts(node) {
      // 显示弹层 并且记录编辑节点
      this.showDialog = true // 显示弹层
      // 记录用node就可以 因为不会同时点击添加或编辑的
      this.node = node // 赋值是同步的  但是props传递到子组件是一个异步渲染的过程  这行代码是同步的    ↓ 但是渲染是异步的 所以这个最后执行
      // 此时就可以调用子组件方法
      // ref 可以获取子组件的实例
      this.$refs.addDept.getDepartmentDetail(node.id) // 这样就不是用赋值的id 而是用传过去的id 解决  ↑
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
</style>
